<template>
  <div class="data-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card :body-style="{ padding: '10px 30px' }">
          <!--  -->
          <div class="header">
            <span>总答题数量</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="指标说明"
              placement="top"
            >
              <i class="el-icon-warning" />
            </el-tooltip>
          </div>
          <div class="quantity">265,560</div>
          <div class="increase">
            <span>周同比 12% <i class="el-icon-caret-top" /></span>
            <span>日环比 11% <i class="el-icon-caret-bottom" /></span>
          </div>
          <div class="hr" />
          <div class="footer">
            <span>日答题数量</span>
            <span>12,423</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{ padding: '10px 30px' }">
          <!--  -->
          <div class="header">
            <span>试题方向</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="指标说明"
              placement="top"
            >
              <i class="el-icon-warning" />
            </el-tooltip>
          </div>
          <RadarVue class="echarts" />
          <!-- <RadarVue2 class="quantity" /> -->
          <div class="hr" />
          <div class="footer">
            <span>试题库数量</span>
            <span>10,234</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{ padding: '10px 30px' }">
          <!--  -->
          <div class="header">
            <span>试题学科分布</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="指标说明"
              placement="top"
            >
              <i class="el-icon-warning" />
            </el-tooltip>
          </div>
          <DataPieChart class="echarts" />
          <div class="hr" />
          <div class="footer">
            <span>前端试题数量</span>
            <span>5,234</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card :body-style="{ padding: '10px 30px' }">
          <!--  -->
          <div class="header">
            <span>上周试题新增</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="指标说明"
              placement="top"
            >
              <i class="el-icon-warning" />
            </el-tooltip>
          </div>
          <DataColumnar class="echarts" />
          <div class="hr" />
          <div class="footer">
            <span>上周新增总量</span>
            <span>1,422</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="sales-card">
      <span class="title">前端与java学科试题走势图</span>
      <div class="header" />
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="前端学科" name="web">
          <el-row v-if="activeName == 'web'" :gutter="20">
            <el-col :xs="24" :sm="16">
              <div class="chart">
                <!-- <line-chart :chart-data="lineChartData" /> -->
                <DataLineChart
                  style="width: 100%; height: 100%"
                  :line-data="web"
                />
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="table">
                <h4>学科试题数量排名</h4>
                <ul>
                  <li>
                    <el-row
                      v-for="(item, index) in salesTable"
                      :key="index"
                      class="row"
                    >
                      <el-col :span="3">
                        <div
                          class="ranking"
                          :class="[index > 2 ? '' : 'light-ranking']"
                        >
                          {{ index + 1 }}
                        </div>
                      </el-col>
                      <el-col :span="16">{{ item.title }}</el-col>
                      <el-col :span="5">{{ item.value }}</el-col>
                    </el-row>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="JAVA学科" name="java">
          <el-row v-if="activeName == 'java'" :gutter="20">
            <el-col :xs="24" :sm="16">
              <div class="chart">
                <!-- <line-chart :chart-data="lineChartData" /> -->
                <DataLineChart
                  style="width: 100%; height: 100%"
                  :line-data="java"
                />
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="table">
                <h4>学科试题数量排名</h4>
                <ul>
                  <li>
                    <el-row
                      v-for="(item, index) in salesTable"
                      :key="index"
                      class="row"
                    >
                      <el-col :span="3">
                        <div
                          class="ranking"
                          :class="[index > 2 ? '' : 'light-ranking']"
                        >
                          {{ index + 1 }}
                        </div>
                      </el-col>
                      <el-col :span="16">{{ item.title }}</el-col>
                      <el-col :span="5">{{ item.value }}</el-col>
                    </el-row>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import RadarVue from './components/dataRadar.vue'
import DataPieChart from './components/dataPieChart.vue'
import DataColumnar from './components/dataColumnar.vue'
import DataLineChart from './components/dataLineChart.vue'

export default {
  components: {
    RadarVue,
    DataPieChart,
    DataColumnar,
    DataLineChart
  },
  data() {
    return {
      name: 'web',
      activeName: 'web',
      salesTable: [
        { title: '前端', value: '999,999' },
        { title: 'java', value: '888,888' },
        { title: '大数据', value: '777,777' },
        { title: 'c++', value: '666,666' },
        { title: 'UI', value: '555,555' },
        { title: 'php', value: '444,444' },
        { title: 'python', value: '333,333' },
        { title: '测试', value: '222,222' }
      ],
      web: [154, 155, 133, 126, 199, 200, 122, 144, 136, 189, 177, 161],
      java: [130, 140, 156, 124, 178, 200, 150, 192, 168, 120, 144, 160]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name)
      // this.lineData = this.data[tab.name]
    }
  }
}
</script>

<style lang="scss" scoped>
.data-container {
  padding: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  span {
    color: #97a8be;
    font-size: 14px;
  }
}
.echarts {
  height: 160px;
  // line-height: 160px;
}
.quantity {
  padding-left: 25px;
  height: 140px;
  line-height: 140px;
  font-size: 35px;
}
.increase {
  height: 20px;
  span {
    margin-right: 10px;
    font-size: 14px;
    .el-icon-caret-top {
      color: red;
    }
    .el-icon-caret-bottom {
      color: green;
    }
  }
}
.hr {
  margin: 8px 0;
  height: 1px;
  width: 100%;
  background: #d8d8d8;
}
.footer {
  span {
    font-size: 14px;
    margin-right: 10px;
  }
}
.sales-card {
  position: relative;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
  .title {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #888;
  }
  .chart {
    widows: 100%;
    height: 300px;
  }
  .table {
    color: rgba(0, 0, 0, 0.65);
    h4 {
      color: #000;
      font-weight: 500;
    }
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      .row {
        margin-bottom: 10px;
      }
    }
    .ranking {
      width: 20px;
      height: 20px;
      background-color: #f5f5f5;
      color: #111;

      text-align: center;
      font-size: 12px;
      line-height: 20px;
      font-weight: 600;
      border-radius: 50%;
    }
    .light-ranking {
      background-color: #314659;
      color: #fff;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
